<style >
  .editor-upload,.btn-upload{display: none}
</style>
<template>
  <section v-loading="isLoading">
    <!-- 图片上传组件辅助-->
    <el-upload class="editor-upload" name="file" :action="uploadAction" :headers="token" :show-file-list="false"
               :on-success="handleImgSuccess" :on-error="handleImgError" :before-upload="beforeAvatarUpload" >
      <el-button id="quill-upload" class="btn-upload">上传照片</el-button>
    </el-upload>
    <div class="quill-editor-example" :style="{height:(height+80)+'px','line-height':'24px'}">
      <quill-editor :ref="name" v-model="editorContent" :options="editorOption" :style="{height:height+'px'}">
      </quill-editor>
    </div>
  </section>
</template>

<script>
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import { quillEditor } from 'vue-quill-editor';
    import { getUploadFileRequest} from "../api/index";
    export default {
        name: "editor",
        props:{
            name:{
              type:String,
              default:'myEditor'
            },
            content:{
                type:String,
                default:'',
            },
            height:{
                type:Number,
                default:200
            }
        },
        watch:{
            content:function (value,oldValue) {
                //console.log("change",value)
                this.editorContent = value;
            },
            editorContent:function (value,oldValue) {
                this.$emit("update:content",value)
            }
        },
        components:{quillEditor},
        data(){
            return{
              isLoading:false,//局部页面加在loading
              token:{'token':this.$store.state.token},
              uploadAction:getUploadFileRequest(), //上传图片地址
                editorContent:'',
                editorOption: {
                    modules: {
                      toolbar: {
                        container:[
                            ['bold', 'italic', 'underline', 'strike'],
                            ['blockquote'],
                            [{'header': 1}, {'header': 2}],
                            [{'list': 'ordered'}, {'list': 'bullet'}],
                            [{'indent': '-1'}, {'indent': '+1'}],
                            [{'direction': 'rtl'}],
                            [{'header': [1, 2, 3, 4, 5, 6, false]}],
                            [{'font': []}],
                            [{'color': []}, {'background': []}],
                            [{'align': []}],
                            ['image', 'link',]
                          ],
                        handlers: {
                          'image': function (value) {
                            if (value) {
                              document.querySelector('#quill-upload').click();
                            } else {
                              this.quill.format('image', false);
                            }
                          }
                        }
                      }
                    }
                },
            }
        },
      methods: {

        beforeAvatarUpload(file) {
          this.isLoading = true;
          const isJPG = file.type === 'image/jpeg';
          const isPNG = file.type === 'image/png';
          const isGif = file.type === 'image/gif';
          const isBMP = file.type === 'image/bmp';
          const isLt1M = file.size / 1024 / 1024 <= 1;
          if (!isJPG && !isPNG && !isGif && !isBMP) {
            this.$message.error('上传图片只能是JPG、BMP、Gif、PNG格式 !');
          }
          if (!isLt1M) {
            this.$message.error('上传图片大小不能超过 1M!');
          }
          let isOk = (isJPG || isPNG || isGif || isBMP) && isLt1M;
          if (!isOk) {
            this.isLoading = false;
          }
          return isOk;
        },
        handleImgSuccess(resp) {
          this.isLoading = false;
          if (resp && resp.code == 0) {
            // 获取富文本组件实例
            let quill = this.$refs[this.name].quill
            // 如果上传成功
            // 获取光标所在位置
            let length = quill.getSelection().index;
            // 插入图片  res.info为服务器返回的图片地址
            quill.insertEmbed(length, 'image', resp.data)
            // 调整光标到最后
            quill.setSelection(length + 1)
          } else {
            this.$message.error('图片插入失败')
          }
          // loading动画消失
          this.isLoading = false;
        },// 富文本图片上传失败
        handleImgError() {
          // loading动画消失
          this.isLoading = false
          this.$message.error('图片插入失败')
        }
      },
        mounted(){
            //this.editorContent = this.content;
        }
    }
</script>
